<template>
  <div>
    <h1>Like page</h1>
    <slot name="header"></slot>
    <feature
      v-for="(item, index) in zanData"
      :key="index"
      :zanData="item"
      @state="getState"
    >
      <!--<template v-slot:zan-text>
        <span style="color: #f00">赞</span>
      </template>-->
      <!--<span slot="zan-text" style="color: #f00">赞</span>-->
      <!--<span slot="after-text">点赞{{msg}}</span>-->
    </feature>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import Feature from './FeatureComponent'

export default {
  name: 'Link',
  components: {
    Feature
  },
  props: {
    zanData: {
      type: Array,
      default: () => []
    },
  },
  methods: {
    getState(id) {
      this.zanData.forEach(item => {
        if(item.id === id) {
          if (item.isZan === 1) {
            item.isZan = 0
            item.count = item.count - 1
          } else {
            item.isZan = 1
            item.count = item.count + 1
          }
        }
      })
    }
  }
}
</script>

